<template>
	<view class="page">
		<topVue :title="i18n.m1"></topVue>
		<view class="banner margin20">
			<view class="title">{{i18n.m2}}</view>
			<view class="address" v-if="parentAddress">{{ parentAddress  | addressFilter() }}</view>
			<view class="address" v-else>--</view>
			<view class="num">{{i18n.m3}}：{{ performance || 0 }}</view>
			<view class="level">{{i18n.m4}}：{{ levelStr }}</view>
		</view>

		<view class="copyVue margin60" @click="$tools.copy(inviteAddress)"></view>

		<view class="listVue margin50">
			<view class="titleVue flex align-center">
				<view class="dot"></view>
				<view class="title">{{i18n.m5}}</view>
			</view>
			<view class="thVue flex margin40 padding-row30">
				<view class="li" style="width: 40%;">{{i18n.m6}}</view>
				<view class="li" style="width: 25%;">{{i18n.m7}}</view>
				<view class="li" style="width: 25%;">{{i18n.m8}}</view>
				<view class="li text-right" style="width: 10%;">{{i18n.m9}}</view>
			</view>
			<view class="tdVue flex padding-row30" v-for="(item ,index) in list" :key="index">
				<view class="li" style="width: 40%;">{{ item.address | addressFilter() }}</view>
				<view class="li" style="width: 25%;">{{ item.performance || 0}}</view>
				<view class="li" style="width: 25%;">{{ item.identityStr }}</view>
				<view class="li text-right" style="width: 10%;">{{ item.levelStr }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				parentAddress: "",
				list: [],
				performance: 0,
				levelStr: "",
				inviteAddress: "",
			}
		},
		
		computed:{
			i18n() {
				return this.$t("message");
			}
		},
		
		async onShow() {
			await this.getUser()
			await this.getTeam()
		},
		
		methods: {
			async getUser(){
				const result = await this.$request("/front/user/userInfo")
				if(result.code===0) {
					this.parentAddress = result.data.parentAddress
					this.performance = result.data.performance
					this.levelStr = result.data.levelStr
					this.inviteAddress = result.data.inviteAddress
					console.log("信息", this.parentAddress, this.performance)
				}
			},
			
			async getTeam(){
				const result = await this.$request("/front/user/inviteList")
				if(result.code===0) {
					this.list = result.data
					console.log("推广列表", this.list)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.banner {
		width: 670rpx;
		height: 418rpx;
		background: url("../../static/team/banner.png") no-repeat;
		background-size: 100% 100%;
		padding: 70rpx 0 107rpx 0;
		.title {
			color: rgba(255,255,255,0.6);
			text-align: center;
			line-height: 1;
		}
		.address {
			font-size: 32rpx;
			text-align: center;
			line-height: 1;
			padding-top: 30rpx;
		}
		.num {
			text-align: center;
			line-height: 1;
			padding-top: 60rpx;
		}
		.level {
			text-align: center;
			line-height: 1;
			padding-top: 35rpx;
		}
	}
	
	.copyVue {
		width: 327rpx;
		height: 90rpx;
		background: url("../../static/team/btn.png") no-repeat;
		background-size: 100% 100%;
	}
	
	.listVue {
		width: 670rpx;
		padding-bottom: 30rpx;
		.thVue {
			width: 670rpx;
			height: 78rpx;
			background: rgba(255,255,255,0.1);
			border-radius: 8rpx;
			.li {
				width: 25%;
				height: 78rpx;
				line-height: 78rpx;
				color: rgba(255,255,255,0.6);
			}
		}
		.tdVue {
			width: 670rpx;
			height: 78rpx;
			border-radius: 8rpx;
			.li {
				width: 25%;
				height: 78rpx;
				line-height: 78rpx;
				color: rgba(255,255,255,0.6);
			}
		}
		.tdVue:nth-child(2n) {
			background: rgba(255,255,255,0.03);
		}
		
		.titleVue {
			width: 100%;
			padding: 40rpx 0 0 0;
			.dot {
				width: 4rpx;
				height: 30rpx;
				background: #45F882;
			}
			.title {
				font-weight: 600;
				padding-left: 20rpx;
				line-height: 1;
				font-size: 32rpx;
			}
		}
	}
	

</style>
